<template>
  <div class="user-table-container">
    <!-- ... 搜索区域等保持不变 ... -->

    <!-- 表格区域 -->
    <a-table
      :data="data.userList"
      :loading="loading"
      :pagination="pagination"
      @page-change="handlePageNumberChange"
      @page-size-change="handlePageSizeChange"
    >
      <template #columns>
        <a-table-column title="用户ID" data-index="id" align="center" />
        <a-table-column title="用户名" data-index="username" align="center" />
        <a-table-column title="昵称" data-index="nickname" align="center" />
        <a-table-column title="邮箱" data-index="email" align="center" />
        <a-table-column title="手机号" data-index="phone" align="center" />
        <a-table-column title="状态" align="center">
          <template #cell="{ record }">
            <!-- 修改状态显示文本，将"停用"改为"封禁" -->
            <a-tag color="red" v-if="record.status === 0">封禁</a-tag>
            <a-tag color="green" v-else>正常</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="注册时间" data-index="createTime" align="center" />
        <!-- 删除赋权列 -->
        <a-table-column title="操作" align="center">
          <template #cell="{ record }">
            <a-space>
              <a-link @click="handleEdit(record)">编辑</a-link>
              <!-- 修改操作按钮文本，将"启用/停用"改为"解封/封禁" -->
              <a-link status="success" v-if="record.status === 0" @click="handleChangeStatus(record)">解封</a-link>
              <a-link status="danger" v-else @click="handleChangeStatus(record)">封禁</a-link>
              <a-link status="danger" @click="handleDelete(record)">删除</a-link>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
// ... 脚本部分保持不变 ...

// 如果有状态变更相关的函数，可能需要调整提示文本
const handleChangeStatus = (record: any) => {
  const actionText = record.status === 0 ? '解封' : '封禁';
  const newStatus = record.status === 0 ? 1 : 0;
  
  Modal.confirm({
    title: `确认${actionText}此用户?`,
    content: `您确定要${actionText} ${record.username} 吗?`,
    onOk: () => {
      // 调用API更新用户状态
      UserService.updateStatus(record.id, newStatus)
        .then(() => {
          Message.success(`${actionText}成功`);
          pageData();
        })
        .catch(error => {
          Message.error(`${actionText}失败: ${error.message}`);
        });
    }
  });
};

// ... 其他函数保持不变 ...
</script>

<style scoped lang="less">
// ... 样式保持不变 ...
</style> 